<template>
  <view class="page_root" data-page-name="员工二级菜单" data-page-identification="x_8g9tl7y3bt">
    <!-- UNI_APP_EXEGESIS_START NAVIGATION_TEMPLATE UNI_APP_EXEGESIS_END -->
    <!-- begin vid_zjgll98b7m 自定义模板_z54fqu5wt6 -->
    <view class="main">
      <view class="user-list" v-if="state.userList.length>0">
        <view class="user-item" v-for="(item, index) in  state.userList " :key="index"
          @click="handleCheckUser(item.objectBelongFlagEnum, item.id, item.name)">
          <view v-if="item.objectBelongFlagEnum === 'DEPARTMENT'" class="dep-avatar"></view>
          <view v-else class="user-avatar"></view>
          <view :class="item.objectBelongFlagEnum === 'DEPARTMENT' ? 'DEPARTMENT' : 'USER'">
            <view :class="item.objectBelongFlagEnum === 'DEPARTMENT' ? 'DEPARTMENT-NAME' : 'USER-NAME'">{{ item.name
            }}</view>
            <view v-if="item.objectBelongFlagEnum === 'USER'" class="dep-name">{{ item.departmentName }}</view>
          </view>
        </view>
      </view>
      <view class="no-user" v-else>
        <u-empty text="部门无人员" mode="list"></u-empty>
      </view>
    </view>
    <!-- end vid_zjgll98b7m 自定义模板_z54fqu5wt6 -->
  </view>
</template>
<script setup>

import {
  ref, reactive, toRaw, markRaw,
  watch, computed,
  onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, getCurrentInstance
} from "vue";
import { useRoute } from 'vue-router';
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
// import { cloneDeep, localGet, traversalTreeStructure, set, checkCaseCondition, throttle, merge, debounce, getGridStyle, getCellRenderAble, formulaStrategy } from '@/utils/index';
// import { isEqual, isNullOrEmpty, isEmptyArr, isArray, isEmpty, isNullOrUnDef, isContained } from '@/utils/is';
import { CovertOptions, getChartsDataSourceConvert } from '@/utils/chart';
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
import { FormFormat } from '@/utils/formFormat'
import { customAddWaterMarkFunc, generateWaterMarkText } from '@/utils/addWaterMark';
import dayjs from 'dayjs';
import hashSum from 'hash-sum';
import { handleRedirect, permission } from '@/utils/common'
/*** UNI_APP_EXEGESIS ***
import { handleRedirect, permission, parseJson } from '@/utils/common';
import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll, onUnload } from '@dcloudio/uni-app';
import { BroadcastMessage } from '@/utils/BroadcastMessage';
import { sendToken } from "@/hooks/useIframeToken";
*** UNI_APP_EXEGESIS ***/


// ---------------------------- 属性定义 ----------------------------
const sourceId = "page3000000101"

// 是否显示菜单按钮
const isMenuIconShow = false;
// NAVIGATION_MENU
const handleShowNavigation = () => { };

let isProcessState = ref(false);


const setTimeOutList = [];


const vid_zjgll98b7m_props = reactive({
  code: "",
});



// ============================ 属性定义 ============================

// ---------------------------- 元素数据引用 ----------------------------
// 组件 自定义模板_z54fqu5wt6 ref 的引用
const vid_zjgll98b7m_ref = ref(null);
// 动态key的map
const fieldTypeMap = {};
// 动态key的map
const refMap = { vid_zjgll98b7m_ref };

const showState = reactive({
  vid_zjgll98b7m_visible: true,
})
// ============================ 元素数据引用 ============================

// ---------------------------- 数据 ----------------------------


// ============================ 数据 ============================

// ---------------------------- 方法 ----------------------------
// ---------------------------- 页面数据 ----------------------------


// ============================ 页面数据 ============================

// ---------------------------- 响应 ----------------------------

// ============================ 响应 ============================

// ---------------------------- 函数 ----------------------------

// 自定义函数 返回上一页
const customFunction_goBack_p68rus9zyc = (...params) => {
  uni.navigateBack()
}

// ============================ 函数 ============================

// ---------------------------- 页面参数 ----------------------------

const pageParameter_state = reactive({
  'processInstanceId': undefined,
})

// ============================ 页面参数 ============================

// ---------------------------- 组件事件处理方法 ----------------------------


// ============================ 组件事件处理方法 ============================

// ============================ 方法 ============================

// ---------------------------- 生命周期 ----------------------------
/*** UNI_APP_EXEGESIS ***
    // 获取上一层传递的数据
    const workflowChannel = new BroadcastMessage('WORKFLOW');
    workflowChannel.publish({ status: 'Ready' });
    workflowChannel.subscribe((data) => {
      if (data) {
        isProcessState.value = (window.self !== window.parent && data.type === 'hideHeader');
      }
    });
    *** UNI_APP_EXEGESIS ***/


const pageScrollTop = ref(0)

// *** PREVIEW_EXEGESIS ***
onMounted(() => {
  setPageParams(route.query)
  // 设置表单的rule
  try {

  } catch {
    // do nothing
  }
});
// *** PREVIEW_EXEGESIS *** //

/*** UNI_APP_EXEGESIS ***
const routeOption = ref({})
onLoad((option) => {
  routeOption.value = option;
});
onReady(() => {
  setPageParams(routeOption.value)
  // 设置表单的rule
  try{

  }catch{
      // do nothing
  }
});
// 图表刷新标记
const uChartsReshowFlag = ref(false);
onHide(() => { // 页面隐藏后标记置为false(如果不置为false无法触发图表更新)
    uChartsReshowFlag.value = false
})
onShow(() => {
    uChartsReshowFlag.value = true; // 页面激活后,标记置为true

    setPageParams(routeOption.value)
})
onPageScroll(e => {
    pageScrollTop.value = e.scrollTop
});
*** UNI_APP_EXEGESIS ***/

const setPageParams = (routerParam) => {
  const pageParams = [{ "dataType": "STRING", "dependencies": [], "name": "processInstanceId" }];
  const strategyMap = {
    STRING: (param, paramValue) => {
      pageParameter_state[param.name] = paramValue;
    },
    BOOLEAN: (param, paramValue) => {
      if ('true' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = true
      } else if ('false' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = false
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    NUMBER: (param, paramValue) => {
      if (!isNaN(paramValue)) {
        pageParameter_state[param.name] = Number(paramValue);
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    ARRAY: (param, paramValue) => {
      if (isNullOrUnDef(paramValue) || !paramValue || paramValue === 'undefined') { // default value
        pageParameter_state[param.name] = [];
      } else if (paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
        try {
          pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
        } catch (error) {
          console.error('参数解析失败 ', error);
        }
      } else {
        console.error('参数传入错误！类型不匹配！');
      }
    },
  };
  pageParams.forEach((param) => {
    strategyMap[param.dataType](param, routerParam[param.name])
  });


}

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ? clearInterval(timer) : clearTimeout(timer);
  });
});


/*** UNI_APP_EXEGESIS ***
onPullDownRefresh(() => {
  // 下拉刷新
  setTimeout(() => {
      uni.stopPullDownRefresh()
  }, 1000)
})
*** UNI_APP_EXEGESIS ***/

// ============================ 生命周期 ============================

// ---------------------------- 数据关联处理 ----------------------------
// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================
//
// ============================ 数据关联处理 ============================

// ---------------------- 不同组件自定义的处理逻辑 ---------------------

// ====================== 不同组件自定义的处理逻辑 ======================


// ================================定制化逻辑========================================
const depIcon = 'http://10.40.0.33:9001/file-storage/416558852345673728.png'
const userIcon = 'http://10.40.0.33:9001/file-storage/416679569361975296.png'

onMounted(() => {
  let a = document.querySelector('.uni-page-head')
  if (a) a.remove()
  getUserData()
})
function getUserData() {
  // 获取当前 URL 中问号后的参数部分
  const queryString = window.location.search

  // 使用 URLSearchParams 解析参数字符串
  const urlParams = new URLSearchParams(queryString)

  // 遍历参数并输出
  urlParams.forEach((value, key) => {
    console.log(`${key}: ${value}`)
  })

  // 获取特定参数的值
  const userId = urlParams.get('id')
  post(`/solution-ppm/api/v2/built-in-system-ppm/dashboard/human-efficiency-analysis/${userId}/employee_list`).then(({ data }) => {
    state.userList = data
  })
}
watch(() => route.query, () => {
  console.log('参数变了');
  getUserData()
}, { deep: true })
const state = reactive({
  userList: []
})
function handleCheckUser(objectBelongFlagEnum, id, name) {
  if (objectBelongFlagEnum === 'DEPARTMENT') {
    handleRedirect(`/pages/Page3000000101/Page3000000101?id=${id}`)
  } else {
    handleRedirect(`/pages/Page3000000242/Page3000000242?name=${name}`)
  }
}
console.log(route.query, '111111')
</script>
<style lang="less" scoped>
.page_root {
  min-height: 100%;
  box-sizing: border-box;
}

.main {
  height: calc(100vh - 90px);
  background: linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%);
  background: linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%);
  position: relative;
  overflow: hidden;
}

.page_root {
  min-height: 100%;
  box-sizing: border-box;
  overflow: hidden !important;
}

.user-item {
  position: relative;
  height: 50px;
  border-bottom: 1px solid rgba(217, 217, 217, 1);
}

.DEPARTMENT {
  line-height: 50px;

}

.DEPARTMENT-NAME {
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 50px;
}

.USER {
  display: flex;
  flex-direction: column;
}

.USER-NAME {
  height: 60%;
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 500;
  margin-left: 50px;
}

.dep-name {
  flex: 1;
  font-size: 12px;
  color: #595959;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 50px;
}

.dep-avatar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-0, -50%);
  border: 1px solid #FFFFFF;
border-radius: 6px;
  width: 40px;
  height: 40px;
  background-image: url('http://10.40.0.33:9001/file-storage/416558852345673728.png');
  background-size: cover;
}
.user-avatar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-0, -50%);
  border: 1px solid #FFFFFF;
border-radius: 6px;
  width: 40px;
  height: 40px;
  background-image: url('http://10.40.0.33:9001/file-storage/416746517959522304.png');
  background-size: cover;
}

.user-list {
  padding: 10px 15px;
  background-color: rgba(255, 255, 255, 0.80);
  position: absolute;
  left: 0;
  width: 100%;
  overflow: auto;
  height: calc(100vh - 20px);
  overflow: auto;
}
.no-user{
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.80);
}
</style>
